/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable import/no-cycle */
/* eslint-disable react/no-danger */
/* eslint-disable no-param-reassign */
import React from 'react';
import { Tabs, Form, Input, Select, Button, Row, Col } from 'antd';
import BaseControl from './BaseControl';
import DesignForm from '../designForm';
import DesignContext from '../designContext';
import ApiHelper from '../api';
import DesignUtil from '../common/DesignUtil';

const { TabPane } = Tabs;
const { Option } = Select;

/**
 * 添加子表单控件
 */
class AddSubFormControl extends BaseControl {
  static create(props, dataProps, extProps) {
    return new AddSubFormControl(props, dataProps, extProps);
  }

  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '添加子表单',
      type: 'AddSubForm',
      formKey: '',
      widthPercent: 100,
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.name = '添加子表单';
    // this.icon = '';
    this.value = [];
    this.designFormRefs = [];
    this.form = null;
  }

  init(parentForm) {
    this.intForm(() => {
      parentForm.refreash();
    });
  }

  intForm(callback) {
    if (this.data.formKey != null && this.data.formKey !== '') {
      ApiHelper.getForm(
        this.data.formKey,
        {
          form_key: this.data.formKey,
        },
        (success) => {
          this.form = success.data;
          if (callback != null) {
            callback();
          }
        },
        (fail) => {},
      );
    } else if (callback != null) {
      callback();
    }
  }

  getJsonValue(jsonValues) {
    const jsonV = [];
    this.designFormRefs.forEach((c, index) => {
      if (c != null) {
        c.getJsonValue(jsonV);
      }
    });
    jsonValues.push({ key: this.data.key, title: this.data.title, value: jsonV, type: this.data.type });
  }

  setJsonValue(jsonValues) {
    const find = jsonValues.find((c) => c.key === this.data.key);
    if (find != null) {
      this.value = find.value.map((c, index) => {
        return { data: c, design_key: this.initKey(index) };
      });
    }
  }

  initKey(index) {
    return `sf${DesignUtil.UUID(16)}`;
  }

  getPropertyTabs(parentForm) {
    return [
      ...super.getPropertyTabs(parentForm),
      <TabPane tab="控件配置" key="3">
        <Form.Item label="子表单">
          <Select
            defaultValue={this.data.formKey}
            value={this.data.formKey}
            onChange={(event) => {
              this.data.formKey = event;
              this.intForm(() => {
                parentForm.refreash();
              });
            }}
          >
            <Option value="">无</Option>
            {parentForm.subForms.map((c, index) => {
              const key = `subform${index}`;
              if (c.form_key === parentForm.useformData.formkey) {
                return <></>;
              }
              return (
                <Option key={key} value={c.form_key}>
                  {c.form_name}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
      </TabPane>,
    ];
  }

  renderItem(parentForm, v, index) {
    const item = (
      <Row key={v.design_key}>
        <Col span={22}>
          <DesignForm
            ref={(r) => {
              this.designFormRefs[index] = r;
            }}
            formkey={this.data.formKey}
            formtype={2}
            formelement="div"
            subform="true"
            initvalue={v.data}
            defaultform={this.form}
            // defaultsubforms={parentForm.subForms}
            {...this.extProps}
          />
        </Col>
        <Col span={2}>
          <Button
            type="link"
            onClick={() => {
              this.value.splice(index, 1);
              parentForm.refreash();
            }}
          >
            删除
          </Button>
        </Col>
      </Row>
    );
    return item;
  }

  renderItems(parentForm) {
    this.designFormRefs = [];
    return this.value.map((v, index) => {
      return this.renderItem(parentForm, v, index);
    });
  }

  getDesignControl(parentForm) {
    return this.data.formKey === '' ? (
      <></>
    ) : (
      <>
        <Button
          {...this.extProps}
          onClick={(event) => {
            this.value.push({ design_key: this.initKey(this.value.length), data: [] }); //
            parentForm.refreash();
            this.extProps?.onChange && this.extProps?.onChange(event);
          }}
        >
          添加
        </Button>
        {this.renderItems(parentForm)}
      </>
    );
  }
}

export default AddSubFormControl;
